$field-label-padding: 4px
$field-button-size: 4px

$c: 100
.connection
  stroke: rgb($c, $c, $c)
  stroke-width: 1

// utility classes
.width-80
  width: 80px

.width-120
  width: 120px

.width-150
  width: 150px

.width-200
  width: 200px

.width-230
  width: 230px

.ratio-50-50
  .inputs
    width: 50%
  .outputs
    width: 50%

.ratio-80-20
  .inputs
    width: 80%
  .outputs
    width: 20%

.ratio-25-50-25
  .inputs, .outputs
    width: 25%
  .center
    width: 50%

.no-inputs
  .inputs
    display: none
    visibility: hidden
  .outputs
    width: 100%

.node
  @extend .ratio-50-50
  +clearfix
  border-radius: 4px
  box-shadow: 0px 1px 2px 0px rgba(#000, 0.2)
  position: absolute !important
  padding: 4px
  border: 1px solid transparent
  min-width: 80px
  background: $node_color

  &.ui-selecting
    background: ($node_color - #050505)
    border: 1px solid ($node_color + #222)

  &.ui-selected
    background: ($node_color + #050505)
    border: 1px solid ($node_color + #333)

  .options
    +clearfix
    width: 100%
    .warning
      padding-top: 7px

  .inner-field
    cursor: pointer
    display: inline-block
    // Make sure the drop area is big enough.
    min-width: 100%
    min-height: 16px
    background: transparent

    span
      display: inline-block
      width: $field-button-size
      height: $field-button-size
      background: #555
      border-radius: $field-button-size

    &:hover
      color: #fff
      span
        background: #fff

  .field-possible-target .inner-field, .inner-field.ui-state-hover
    color: #aaa
    span
      background: #ccc

  .inner-field.ui-state-hover
    color: $main_color
    span
      background: $main_color

  .inputs, .outputs
    color: #777
    & > div
      height: 12px

  .inputs, .outputs, .center
    display: inline
    float: left
    & > div
      display: inline-block
      width: 100%
      vertical-align: middle
      line-height: 10px
  .outputs
    float: right
  .inputs .inner-field span
    margin-right: $field-label-padding
  .outputs .inner-field span
    margin-left: $field-label-padding

// nodes inside a group node
.node .node
  position: relative !important
  padding: 0
  border-radius: 0px
  width: 100% !important
  left: auto !important
  top: auto !important
  background: none !important
  border: 0 !important

$animation_color: #f00
.node-has-animation
  box-shadow: $animation_color 0 0 1px inset

.has-animation
  color: $animation_color


.node-Group
  @extend .width-200
  @extend .ratio-50-50
  > .head span
    color: #fff
  h3
    margin-bottom: 0
    font-size: 10px
    font-weight: bold

  .subnodes
    height: auto !important
  .outputs h3
    text-align: right

// base
.type-Base
  @extend .width-80

.node-Number
  @extend .width-150
  @extend .ratio-25-50-25

.node-String
  @extend .width-150
  @extend .ratio-25-50-25

// utils
.type-Utils
  @extend .width-80

.node-Random, .node-Timer
  @extend .width-150
  @extend .ratio-25-50-25

.node-LFO
  @extend .width-200
  @extend .ratio-25-50-25

.node-Mp3Input
  @extend .width-200
  @extend .ratio-50-50

// three.js related nodes
.type-Three, .type-Materials, .type-Geometry
  @extend .width-200
  @extend .ratio-80-20

.node-ThreeMesh, .node-Camera, .node.node-Texture
  @extend .width-120
  @extend .ratio-80-20

.type-Lights, .type-Particle
  @extend .width-150
  @extend .ratio-80-20

// postprocessing
.type-PostProcessing
  @extend .width-150
  @extend .ratio-80-20

// particle
.node-SparksMove
  @extend .width-80
  @extend .no-inputs

// code
.type-Code
  width: auto
  //@extend .ratio-25-50-25
  .inputs
    width: 80px

  .outputs
    width: 60px

  .center
    width: calc(100% - 140px)

  textarea
    min-height: 5em
    font-size: 13px

// special nodes
.node-WebGLRenderer
  @extend .width-120
  .inputs
    width: 100%
  .outputs
    display: none
    visibility: hidden

.node-Mouse
  @extend .width-80
  @extend .no-inputs

.node-Color
  @extend .width-80
  .inputs, .outputs
    width: 35%
  .center
    @extend .inline-float
    width: 30%
  $preview_size: 17px
  .center .color_preview
    width: $preview_size
    height: $preview_size
    border: 1px solid #444
    margin-top: 6px
    margin-left: 2px
